<script setup lang="js">
import { ref,onMounted } from "vue";
import {Tickets} from "@element-plus/icons-vue";
import {flashSessionList,updateSessionStatus,deleteSession,createSession,updateSession} from "@/api/flashSession.js";
import {ElMessage, ElMessageBox} from "element-plus";


const defaultFlashSession={
  name:null,
  startTime:null,
  endTime:null,
  status:0
};
const flashList = ref([]);

onMounted(() => {
  getFlashList();
});

// 获取秒杀列表
const getFlashList = () => {
  flashSessionList({}).then(res => {
    flashList.value = res.data.data;
  });
}

// 是否启用
const handleStatusChange = (index, row) => {
  ElMessageBox.confirm('是否修改该秒杀时间段？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    updateSessionStatus(row.id, {status: row.status}).then((res) => {
      ElMessage.warning(res.data.message);
      ElMessage.success('修改成功');
    });
  }).catch(() => {
    row.status = 0;
    ElMessage.info('已取消修改');
  });
  getFlashList();
}

// 格式化时间
const formatTime = (time) => {
  if (!(time instanceof Date)) {
    time = new Date(time);
  }
  const hour = String(time.getHours()).padStart(2, '0');
  const minute = String(time.getMinutes()).padStart(2, '0');
  const second = String(time.getSeconds()).padStart(2, '0');
  return `${hour}:${minute}:${second}`;
}

</script>

<template>
  <div class="flash-list">
    <!--时间段列表-->
    <div class="add-list">
      <div class="add-btn">
        <el-icon>
          <Tickets/>
        </el-icon>
        <span>数据列表</span>
      </div>
      <div class="add-btn">
        <el-button type="primary" icon="plus" @click="handleAdd">添加</el-button>
      </div>
    </div>
  
    <!--数据列表-->
    <div class="data-list">
      <el-table ref="flashSessionTable"
                :data="flashList"
                style="width: 100%;" border>
        <el-table-column label="编号" width="100" align="center">
          <template  #default="{row}">{{row.id}}</template>
        </el-table-column>
        <el-table-column label="秒杀时间段名称" align="center">
          <template  #default="{row}">{{row.name}}</template>
        </el-table-column>
        <el-table-column label="每日开始时间" align="center">
          <template  #default="{row}">{{ formatTime(row.startTime) }}</template>
        </el-table-column>
        <el-table-column label="每日结束时间" align="center">
          <template  #default="{row}">{{ formatTime(row.endTime) }}</template>
        </el-table-column>

        <el-table-column label="启用" align="center">
          <template #default="{row}">
            <el-switch
                @change="handleStatusChange(index, row)"
                :active-value="1"
                :inactive-value="0"
                v-model="row.status">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="{row}">
            <el-button type="text"
                       @click="handleUpdate(index, row)">编辑
            </el-button>
            <el-button type="text"
                       @click="handleDelete(index, row)">删除
            </el-button>
          </template>
        </el-table-column>
        
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">

.flash-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;


  .add-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  margin-bottom: 20px;
  border: 1px solid #d5d5d5;
  border-radius: 5px;

  .add-btn {
    display: flex;
    align-items: center;

    span {
      margin-left: 8px;
      font-size: 18px;
    }
  }
}
}

</style>